<template> 
    <div class="long-family">
        <div  class="head-tab">
            <zan-tab
            :scroll="false"
            :list="tabList"
            :selected-id="selectedId" 
            @tabchange="handleTabChange"
            />
        </div> 
        <div class="long-msg" v-if="selectedId==1">
            <state-msg :item="item" v-for="(item,index) in  TopicsList" :key="index" @clickBtn="stateBtn" @jump="jumpState"></state-msg>
        </div> 
        <div v-if="selectedId==2||selectedId==3">
            <art-list  v-for="(item,index) in  articlesList" :key="index" :item="item" @shoucang="shoucang"  @jumpDetail="jumpDetail"></art-list> 
        </div>
        <div v-if="selectedId==4">
            <paste-list @jump="jumpCardDetail" @optBtn="optBtn" v-for="(item,index) in stateList" :key="index" :item="item"></paste-list> 
        </div>
    </div> 
</template>

<script> 
import * as api from '@/utils/api' 
import stateMsg from '@/components/tpl/state-msg' 
import artList from '@/components/tpl/art-list' 
import pasteList from '@/components/tpl/paste-list' 
export default {
    onShow(){
        // this.getStateMsg(this.selectedId);
        if(this.selectedId==1){
            this.getStateMsg();
        }else if(this.selectedId==2){
            this.getArticles(1)
        }else if(this.selectedId==3){
            this.getArticles(2)
        }else if(this.selectedId==4){
            this.getstateList()
        }
    },
    components: {
        stateMsg,
        artList,
        pasteList
    }, 
    data () {
        return {
            selectedId: '1', 
            tabList:[{
                id: '1',
                title: '话题'
            },{
                id: '2',
                title: '长寿基金'
            },{
                id: '3',
                title: '长寿故事'
            },{
                id: '4',
                title: '长寿论坛'
            }],
            TopicsList:[],  //话题列表
            articlesList:[],//文章列表
            stateList:[],
        }
    },
    methods:{
        //获得话题列表
        getStateMsg(){
            let vm = this;
            let body={
                model: "Topics",
                with:{
                    "0":"follows",
                    "1":"count"
                }, 
                limit:30, 
            };
            api.commonSite(body).then(res=>{
                if(res.data.code==200){
                    vm.TopicsList=res.data.data.data;
                }
            })
        },
        //关注话题 删除话题
        stateBtn(val,item){
            let vm = this;
            if(val=='add'){
                let body={
                    model: "Attentions",
                    data:{
                        uid:wx.getStorageSync('u_id'),
                        to_id:item.id,
                        type:'2'
                    }
                };
                api.createSite(body).then(res=>{
                    if(res.data.code==200){
                        vm.getStateMsg();
                    }
                })
            }else{
                let body={
                    model: "Attentions",
                    data:{
                        uid:wx.getStorageSync('u_id'),
                        to_id:item.id,
                        type:'2'
                    }
                };
                api.deleteData(body).then(res=>{
                    if(res.data.code==200){
                        vm.getStateMsg();
                    }
                })
            }
        },
        //跳转详情
        jumpDetail(item){
            let url = `./../article-detail/main?artId=${item.article_id}&title=${item.title}`;
            wx.navigateTo({url}) 
        },
        //获得文章列表
        getArticles(val){
            let vm = this;
            let body={
                model: "Articles",
                condition:{
                    tab_id:val    //故事1 基金2 
                }, 
                with:{ 
                    "0":"tabs",
                    "1":"records",
                    "2":"collects",
                    "3":"shares"
                },
                limit:30, 
            };
            api.commonSite(body).then(res=>{
                if(res.data.code==200){
                    let arr=[]; 
                    res.data.data.data.forEach((item,index)=>{
                        item.create_time_txt=item.create_time.split(' ')[0];
                        arr.push(item);
                    });
                    vm.articlesList=arr;
                }
            })
        },
        //获得所以帖子列表
        getstateList(){
            let vm = this;
            let body={
                model: "Forums",
                with:{
                    "0":"topics",
                    "1":"collects",
                    "2":"shares",
                    "3":"comments"
                },
                limit:40, 
                orderBy:"create_time desc",
            };
            api.commonSite(body).then(res=>{
                if(res.data.code==200){
                    vm.stateList=res.data.data.data;
                    vm.stateList.forEach((item,index)=>{
                        item.imgList=item.images.split(',');
                    });
                }
            })
        },
        //跳转帖子详情
        jumpCardDetail(item){ 
            let url=''; 
            url= `./../card-detail/main?forumId=${item.forum_id}`; 
            wx.navigateTo({url})  
        },
        handleTabChange(e) {  
            this.selectedId=e.mp.detail;
            if(this.selectedId==1){
                this.getStateMsg();
            }else if(this.selectedId==2){
                this.getArticles(1)
            }else if(this.selectedId==3){
                this.getArticles(2)
            }else if(this.selectedId==4){
                this.getstateList()
            }
        },
        //跳转话题列表
        jumpState(item){
            let url = `./../topics/main?tId=${item.id}`;
            wx.navigateTo({url}) 
        },
        //收藏
        shoucang(val,item){
            let vm = this;
            let body={
                model: "Records",
                data:{
                    uid: wx.getStorageSync('u_id'),      
                    resource_id: item.article_id,   
                    type:1,        
                    resource_type: item.tabs.type,   
                    category:"1" 
                } 
            }; 
            if(val=='clear'){
                api.deleteData(body).then(res=>{
                    if(res.data.code==200){
                        if(vm.selectedId==2){
                            vm.getArticles(1)
                        }else if(vm.selectedId==3){
                            vm.getArticles(2)
                        }
                        wx.showToast({icon:'none', title: '取消成功' })
                    }
                });
            }else{
                api.createSite(body).then(res=>{
                    if(res.data.code==200){
                        if(vm.selectedId==2){
                            vm.getArticles(1)
                        }else if(vm.selectedId==3){
                            vm.getArticles(2)
                        }
                        wx.showToast({icon:'none', title: '收藏成功' })
                    }
                });
            }
            
        },
        optBtn(val,item){
            let vm = this;
            console.log(item);
            if(val=="collect"){ 
                let body={
                    model: "Records",
                    data:{
                        uid: wx.getStorageSync('u_id'),      
                        resource_id: item.forum_id,   
                        type:1,        
                        resource_type:7,   
                        category:"1" 
                    } 
                }; 
                if(item.is_collect==1){
                    api.deleteData(body).then(res=>{
                        if(res.data.code==200){
                            vm.getstateList();
                            wx.showToast({icon:'none', title: '取消成功' })
                        }
                    });
                }else{
                    api.createSite(body).then(res=>{
                        if(res.data.code==200){
                            vm.getstateList();
                            wx.showToast({icon:'none', title: '收藏成功' })
                        }
                    });
                }
            }
        },
    }, 
}

</script>
<style scoped lang="scss">
.long-family{
    width:100%;
    padding-top:90rpx;
   .head-tab{
        position:fixed;
        top:0;
        width:100%;
        height:90rpx;
        background:#fff; 
        z-index:20;
    } 
    .long-msg{
        padding:20rpx;
        box-sizing:border-box;
    }
}
</style> 
